<template>
  <div>
    <complex-table :data="rules">
      <el-table-column :label="$t('business.network.host')" prop="host" />
      <el-table-column :label="$t('business.network.path')" prop="path" />
      <el-table-column
        :label="$t('business.network.service_name')"
        prop="serviceName"
      />
      <el-table-column
        :label="$t('business.network.service_port')"
        prop="servicePort"
      />
    </complex-table>
  </div>
</template>

<script setup lang="ts">
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import { onMounted, ref } from "vue";
import { IngressRule } from "../../../api/k8s";
type Prop = {
  data?: IngressRule[];
};
const props = withDefaults(defineProps<Prop>(), {});
type DataRuleType = {
  host: string;
  path: string;
  pathType: string;
  serviceName: string;
  servicePort: string | number;
};
const rules = ref<DataRuleType[]>([]);

onMounted(() => {
  rules.value = [];
  for (const rule of props.data ?? []) {
    for (const p of rule.http?.paths ?? []) {
      rules.value.push({
        host: rule.host,
        path: p.path ? p.path : "",
        pathType: p.pathType,
        serviceName: p.backend.service ? p.backend.service.name : "",
        servicePort: p.backend.service ? p.backend.service.port?.number : ""
      });
    }
  }
});
</script>

<style scoped></style>
